<template>
  <view class="wrap">
    <view class="header">
      <img class="headerBg" src="https://ainengli.hzjrsw.com/jkhx/homeBg.png" alt="" />
      <view class="info">
        <!-- <img
          class="image"
          v-if="state.userInfo && state.userInfo.gender == '女性'"
          src="@/static/image/hmm/woman.png"
          alt=""
        />
        <img class="image" v-else src="@/static/image/hmm/man.png" alt="" /> -->
        <view class="image">
          <img
            class="img"
            v-if="state.userInfo && state.userInfo.gender == '女性'"
            src="@/static/image/hmm/woman.png"
            alt=""
          />
          <img class="img" v-else src="@/static/image/hmm/man.png" alt="" />
          <img
            v-if="state.userInfo && state.userInfo.isVip == true"
            class="isVip"
            src="@/static/image/hmm/10.png"
            alt=""
          />
        </view>
        <view class="min">
          <text class="name">{{ state.userInfo && state.userInfo.patName }}</text>
          <!-- on  代表不是本人 -->
          <!-- <text v-if="state.userInfo && state.userInfo.relation == '本人'" class="relationship"
            >本人</text
          >
          <text v-else class="relationship on">配偶</text> -->
          <text
            v-if="state.userInfo && state.userInfo.relation !== null"
            :class="[
              'relationship',
              state.userInfo && state.userInfo.relation == '本人' ? '' : 'on'
            ]"
          >
            {{ state.userInfo.relation }}
          </text>
        </view>
        <view @tap="toFamily" class="right">
          <text class="patient">切换就诊人</text>
          <img class="switch" src="https://ainengli.hzjrsw.com/jkhx/switch.png" alt="" />
        </view>
      </view>
      <view class="list">
        <view @tap="toRisk" class="item">
          <img class="itemBg" src="https://ainengli.hzjrsw.com/jkhx/selfTest.png" alt="" />
          <view class="selfTest">
            <text class="name">健康自测</text>
            <text class="title">健康风险评估</text>
          </view>
        </view>
        <view @tap="toBody" class="item">
          <img class="itemBg" src="https://ainengli.hzjrsw.com/jkhx/portrait.png" alt="" />
          <view class="selfTest">
            <text class="name">健康画像</text>
            <text class="title">可视化健康分析</text>
          </view>
        </view>
      </view>
    </view>
    <view class="listWrap">
      <view @tap="toReport" class="item">
        <img class="image" src="https://ainengli.hzjrsw.com/jkhx/report.png" alt="" />
        <text class="name">报告查询</text>
      </view>
      <view @tap="toPhysical" class="item">
        <img class="image" src="https://ainengli.hzjrsw.com/jkhx/physicalExamination.png" alt="" />
        <text class="name">预约体检</text>
      </view>
      <view @tap="healthArchives" class="item">
        <img class="image" src="https://ainengli.hzjrsw.com/jkhx/archives.png" alt="" />
        <text class="name">健康档案</text>
      </view>
      <view @tap="healthMonitor" class="item">
        <img class="image" src="https://ainengli.hzjrsw.com/jkhx/monitor.png" alt="" />
        <text class="name">健康监测</text>
      </view>
    </view>
    <img
      v-if="state.userInfo && state.userInfo.isVip == true"
      @tap="goManageFun"
      class="headerBanner on"
      src="https://ainengli.hzjrsw.com/jkhx/headerBanner1.png"
      alt=""
    />
    <img
      v-else
      class="headerBanner"
      src="https://ainengli.hzjrsw.com/jkhx/headerBanner.png"
      alt=""
      @tap="gocheckFun"
    />
    <view class="tabWrap">
      <view class="item" v-for="(item, index) in icons" :key="index" @tap="jumpTo(item.path)">
        <img class="img" :src="item.img" alt="" />
        <text class="name">{{ item.text }}</text>
      </view>
    </view>
    <view class="healthWrap">
      <view class="title">健康服务</view>
      <view class="healthWraps">
        <view class="item" @tap="servicePack">
          <img class="image" src="https://ainengli.hzjrsw.com/jkhx/servicePackage.png" alt="" />
          <view class="content blue">
            <view class="name">
              <text>专病</text>
              <text class="firstName">服务包</text>
            </view>
            <text class="secondaryTitle">特色专病管理</text>
          </view>
        </view>
        <view class="item" @tap="medicalGreenFun">
          <img class="image" src="https://ainengli.hzjrsw.com/jkhx/greenway.png" alt="" />
          <view class="content green">
            <view class="name">
              <text>就医</text>
              <text class="firstName">绿通</text>
            </view>
            <text class="secondaryTitle">预约对症专家</text>
          </view>
        </view>
        <view class="item" @tap="goWeightLoss">
          <img class="image" src="https://ainengli.hzjrsw.com/jkhx/assistant.png" alt="" />
          <view class="content">
            <view class="name">
              <text>体重</text>
              <text class="firstName">管理</text>
            </view>
            <text class="secondaryTitle">健康减重</text>
          </view>
        </view>
      </view>
    </view>
    <view class="healthTask">
      <view class="title">今日健康任务</view>
      <view class="taskWrap">
        <view v-if="state.taskList && state.taskList.length > 0">
          <view class="item" v-for="(item, index) in state.taskList" :key="index">
            <view class="top">
              <img
                class="image"
                v-if="item.templateType == '健康监测'"
                src="https://ainengli.hzjrsw.com/jkhx/healthmMonitor.png"
                alt=""
              />
              <img
                class="image"
                v-else-if="item.templateType == '健康处方'"
                src="https://ainengli.hzjrsw.com/jkhx/prescription.png"
                alt=""
              />
              <img
                class="image"
                v-else-if="item.templateType == '饮食方案'"
                src="@/static/image/raozg/food.png"
                alt=""
              />
              <img
                class="image"
                v-else-if="item.templateType == '运动方案'"
                src="@/static/image/raozg/sports.png"
                alt=""
              />
              <img
                class="image"
                v-else-if="item.templateType == '健康宣教'"
                src="https://ainengli.hzjrsw.com/jkhx/propaganda.png"
                alt=""
              />
              <img
                class="image"
                v-else-if="item.templateType == '健康随访'"
                src="https://ainengli.hzjrsw.com/jkhx/followUp.png"
                alt=""
              />
              <img
                class="image"
                v-else-if="item.templateType == '用药提醒'"
                src="https://ainengli.hzjrsw.com/jkhx/remind.png"
                alt=""
              />
              <img class="image" v-else src="https://ainengli.hzjrsw.com/jkhx/visit.png" alt="" />
              <text class="name">{{ item.templateType }}</text>
              <text class="time">{{
                item.planTime
                  ? transformTimeTwo(
                      new Date(item.planTime.replace(/\-/g, '/')).getTime(),
                      'minutesdd'
                    ).replace(/\//g, '-')
                  : ''
              }}</text>
            </view>
            <view class="min">
              <view class="content">{{ item.typeContent }}</view>
              <view
                :class="[
                  'operation',
                  !item.isRead && item.dateStatus == 0
                    ? 'unfinished'
                    : !item.isRead && item.dateStatus == null
                    ? ''
                    : 'on'
                ]"
                @tap="targetType(item)"
              >
                {{
                  !item.isRead && item.dateStatus == 0
                    ? '未完成'
                    : !item.isRead && item.dateStatus == null
                    ? '去完成'
                    : '已完成'
                }}
              </view>
            </view>
          </view>
        </view>
        <view class="nodate" v-else>
          <img class="img" src="https://ainengli.hzjrsw.com/jkhx/noData.png" alt="" />
          <view class="nodate_text">
            <text class="name">暂无今日健康任务</text>
          </view>
        </view>
      </view>
    </view>
    <view class="smart-set" @click="toAi">
      <img class="ai-bg" src="https://ainengli.hzjrsw.com/jkhx/6.png" alt="" />
      <text class="ai-name">AI助理</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { taskDetail, memberInfo, taskAllDate } from '@/api/hmm'
import store from '@/store'
import { transformTimeTwo } from '@/utils/hmm'
const icons = [
  {
    img: 'https://ainengli.hzjrsw.com/jkhx/1.png',
    text: '智能饮食',
    path: ''
  },
  {
    img: 'https://ainengli.hzjrsw.com/jkhx/2.png',
    text: '运动推荐',
    path: ''
  },
  {
    img: 'https://ainengli.hzjrsw.com/jkhx/3.png',
    text: '睡眠指导',
    path: '/module/pages/sleep/index'
  },
  {
    img: 'https://ainengli.hzjrsw.com/jkhx/4.png',
    text: '心理指导',
    path: '/module/pages/psychology/index'
  },
  {
    img: 'https://ainengli.hzjrsw.com/jkhx/5.png',
    text: '中医管理',
    path: '/module/pages/traditionalCMG/index'
  }
]
const state = reactive({
  userInfo: {},
  getUserId: '',
  taskList: [],
  isRead: false
})
const jumpTo = (path) => {
  uni.navigateTo({
    url: path
  })
}
onShow(() => {
  state.isRead = false
  uni.removeStorageSync('healthManageTab')
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.getUserId = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).userId
    : ''
  init()
})
const init = () => {
  //   uni.showLoading({
  //     title: '加载中'
  //   })
  let param = state.userInfo.empi + '/' + state.getUserId
  taskDetail(param).then((res) => {
    // uni.hideLoading()
    if (res.code == 0) {
      state.taskList = res.data
    } else {
      state.taskList = []
    }
  })
}
const goManageFun = () => {
  if (state.isRead == false) {
    state.isRead = true
    uni.showLoading({
      title: '加载中'
    })
    let param = state.userInfo.empi + '/' + state.getUserId
    memberInfo(param).then((res) => {
      if (res.code == 0) {
        if (res.data && res.data.questionState == false) {
          uni.hideLoading()
          state.isRead = false
          uni.navigateTo({ url: '/packA/pages/questionaire/enter' })
        } else {
          // 判断所有健康任务列表是否有数据
          let param = state.userInfo.empi + '/' + state.getUserId
          taskAllDate(param).then((resTwo) => {
            uni.hideLoading()
            state.isRead = false
            if (resTwo.code == 0) {
              if (resTwo.data && resTwo.data.length > 0) {
                uni.setStorageSync('healthManageTab', 0)
                uni.navigateTo({ url: '/packA/pages/healthManage/index' })
              } else {
                uni.navigateTo({ url: '/packA/pages/questionaire/risk' })
              }
            }
          })
        }
      }
    })
  }
}
const gocheckFun = () => {
  if (state.userInfo && state.userInfo.reportState) {
    uni.navigateTo({ url: '/packA/pages/buyMember/index?source=sourceIndex' })
  } else {
    uni.navigateTo({ url: '/packA/pages/questionaire/physical' })
  }
}
const targetType = (item) => {
  if (item.templateType == '健康监测') {
    uni.navigateTo({ url: '/packA/pages/healthPortrait/indexTwo' })
  } else if (item.templateType == '健康随访') {
    store.commit('SET_FOLLOW', item)
    if (item.isRead) {
      uni.navigateTo({
        url: '/packA/pages/follows/detail?name=' + item.itemName
      })
    } else {
      uni.navigateTo({
        url: '/packA/pages/follows/fillin?name=' + item.itemName
      })
    }
  } else if (item.templateType == '健康宣教') {
    if (item.itemContent && JSON.parse(item.itemContent).id) {
      uni.navigateTo({
        url:
          '/packA/pages/popularScience/detail?id=' +
          JSON.parse(item.itemContent).id +
          '&isreadId=' +
          item.id +
          '&dateStatus=' +
          item.dateStatus
      })
    }
  } else if (item.templateType == '饮食方案') {
    // if (item.itemContent && !item.isRead) {
    uni.navigateTo({
      url: '/packA/pages/dailyFood/foodDetail?id=' + item.id
    })
    // }
  } else if (item.templateType == '运动方案') {
    // if (item.itemContent && !item.isRead) {
    uni.navigateTo({
      url: '/packA/pages/sportsInformation/sportsDetail?id=' + item.id
    })
    // }
  } else {
    uni.navigateTo({
      url: '/packA/pages/healthManage/detail?id=' + item.id + '&dateStatus=' + item.dateStatus
    })
  }
}
const medicalGreenFun = () => {
  if (state.userInfo) {
    if (state.userInfo.isVip) {
      uni.navigateTo({ url: '/packA/pages/healthManage/greenWay' })
    } else {
      if (state.userInfo.reportState == false) {
        uni.navigateTo({ url: '/packA/pages/questionaire/physical' })
      } else {
        uni.navigateTo({ url: '/packA/pages/healthManage/greenWayJoin' })
      }
    }
  }
}
// 跳转到减重
const goWeightLoss = () => {
  wx.navigateToMiniProgram({
    appId: 'wxc24c1886d22cd193',
    path: 'pages/load/index',
    // extraData: {
    //   foo: 'bar'
    // },
    envVersion: 'develop',
    success(res) {
      console.log('跳转成功')
      // 打开成功
    }
  })
}
const healthArchives = () => {
  uni.navigateTo({ url: '/packA/pages/moreMessage/index' })
}
const healthMonitor = () => {
  uni.navigateTo({ url: '/packA/pages/healthPortrait/indexTwo' })
}
const toFamily = () => {
  uni.navigateTo({ url: '/packA/pages/family/index' })
}
const toBody = () => {
  uni.navigateTo({ url: '/packA/pages/body/index' })
}
const toReport = () => {
  uni.navigateTo({ url: '/packA/pages/report/index' })
}
const toPhysical = () => {
  uni.navigateTo({ url: '/packA/pages/questionaire/physical' })
}
const toRisk = () => {
  if (state.userInfo && state.userInfo.questionState == false) {
    uni.navigateTo({
      url: '/packA/pages/questionaire/index'
    })
  } else {
    uni.navigateTo({
      url: '/packA/pages/questionaire/detail?index=0'
    })
  }
}
const toAi = () => {
  uni.navigateTo({ url: '/module/src/pages/aiassistant/index' })
}
const servicePack = () => {
  //   uni.showToast({
  //     title: '开发中,敬请期待',
  //     icon: 'none'
  //   })
  uni.navigateTo({ url: '/packA/pages/index/diseaseServicePack' })
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}
.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  content: '.';
  visibility: hidden;
}
.wrap {
  min-height: 100vh;
  padding-bottom: 32rpx;
  .header {
    height: 330rpx;
    position: relative;
    .headerBg {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    .info {
      display: inline-block;
      margin: 32rpx 32rpx 0;
      width: calc(750rpx - 64rpx);
      position: relative;
      z-index: 2;
      .image {
        display: inline-block;
        vertical-align: middle;
        width: 96rpx;
        height: 96rpx;
        position: relative;
        .img {
          display: block;
          width: 100%;
          height: 100%;
        }
        .isVip {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }
      .min {
        display: inline-block;
        vertical-align: middle;
        margin-left: 24rpx;
        .name {
          font-size: 36rpx;
          color: #222;
          display: block;
          font-weight: 700;
        }
        .relationship {
          display: inline-block;
          padding: 2rpx 24rpx;
          color: #fff;
          font-size: 24rpx;
          background: #00d1b6;
          border-radius: 22rpx;
          margin-top: 12rpx;
          &.on {
            background: #5c8eff;
          }
        }
      }
      .right {
        position: absolute;
        top: 0rpx;
        right: 0rpx;
        padding: 0 24rpx;
        height: 50rpx;
        line-height: 45rpx;
        background: #fff;
        border-radius: 50rpx;
        .patient {
          font-size: 24rpx;
          color: #456465;
          display: inline-block;
          vertical-align: middle;
          height: auto;
          line-height: initial;
        }
        .switch {
          display: inline-block;
          vertical-align: middle;
          width: 24rpx;
          height: 24rpx;
          margin-left: 8rpx;
        }
      }
    }
    .list {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 32rpx;
      padding: 0 32rpx;
      gap: 24rpx;
      .item {
        position: relative;
        height: 160rpx;
        width: 100%;
        .itemBg {
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 100%;
        }
        .selfTest {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 24rpx;
          z-index: 2;
          font-size: 24rpx;
          color: #fff;
          .name {
            font-size: 36rpx;
            font-weight: 700;
            display: block;
            margin-bottom: 12rpx;
            text-shadow: 0px 2px 2px #5085c6;
          }
        }
        &:nth-child(2) {
          .selfTest {
            .name {
              text-shadow: 0px 2px 2px #00a892;
            }
          }
        }
      }
    }
  }
  .listWrap {
    margin: 24rpx 32rpx 0;
    padding: 32rpx 24rpx;
    display: flex;
    align-items: center;
    align-content: space-between;
    gap: 48rpx;
    border-radius: 16rpx;
    background: #fff;
    .item {
      width: 100%;
      .image {
        display: block;
        width: 56rpx;
        height: 56rpx;
        margin: 0 auto;
      }
      .name {
        font-size: 30rpx;
        color: #222;
        margin-top: 18rpx;
        display: block;
        text-align: center;
      }
    }
  }
  .headerBanner {
    margin: 24rpx 32rpx;
    display: block;
    width: calc(100% - 64rpx);
    height: 320rpx;
    &.on {
      height: 152rpx;
    }
  }
  .tabWrap {
    margin: 0 32rpx 24rpx;
    padding: 0rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    font-size: 0;
    .item {
      width: 20%;
      display: inline-block;
      padding: 32rpx 0;
      text-align: center;
      vertical-align: middle;
      .img {
        width: 48rpx;
        height: 48rpx;
        display: block;
        margin: 0 auto;
      }
      .name {
        font-size: 26rpx;
        color: #222;
        margin-top: 16rpx;
        display: inline-block;
      }
    }
  }
  .healthWrap {
    margin: 0 32rpx;
    padding: 32rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    .title {
      font-size: 32rpx;
      color: #222;
      font-weight: 700;
    }
    .healthWraps {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      align-content: space-between;
      gap: 16rpx;
      .item {
        width: 100%;
        position: relative;
        height: 242rpx;
        .image {
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 100%;
        }
        .content {
          position: absolute;
          top: 26rpx;
          left: 0rpx;
          width: 100%;
          z-index: 2;
          .name {
            font-size: 32rpx;
            color: #ff813c;
            font-weight: 700;
            padding-left: 18rpx;
            text-align: left;
            .firstName {
              color: #222;
            }
          }
          .secondaryTitle {
            font-size: 24rpx;
            color: #ff813c;
            padding-left: 18rpx;
            margin-top: 8rpx;
            display: inline-block;
          }
          &.green {
            .name {
              color: #00d1b6;
            }
            .secondaryTitle {
              color: #00d1b6;
            }
          }
          &.blue {
            .name {
              color: #527dff;
            }
            .secondaryTitle {
              color: #527dff;
            }
          }
        }
      }
    }
  }
  .healthTask {
    margin: 24rpx 32rpx 0;
    padding: 32rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    .title {
      font-size: 32rpx;
      color: #222;
      font-weight: 700;
    }
    .taskWrap {
      margin-top: 24rpx;
      .item {
        background: #fafafa;
        border-radius: 12rpx;
        padding: 24rpx;
        margin-top: 24rpx;
        &:nth-child(1) {
          margin-top: 0;
        }
        .top {
          position: relative;
          .image {
            display: inline-block;
            vertical-align: middle;
            width: 40rpx;
            height: 40rpx;
          }
          .name {
            display: inline-block;
            vertical-align: middle;
            margin-left: 16rpx;
            font-size: 32rpx;
            color: #222;
            font-weight: 700;
          }
          .time {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            font-size: 28rpx;
            color: #666;
          }
        }
        .min {
          position: relative;
          margin-top: 16rpx;
          .content {
            overflow: hidden;
            // white-space: nowrap;
            // text-overflow: ellipsis;
            font-size: 24rpx;
            color: #666;
            padding: 8rpx 16rpx;
            background: #fff;
            border-radius: 4rpx;
            display: inline-block;
            max-width: calc(100% - 124rpx);
          }
          .operation {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            padding: 6rpx 23rpx;
            background: #00d1b6;
            border: 1rpx solid #00d1b6;
            font-size: 24rpx;
            color: #fff;
            border-radius: 38rpx;
            &.on {
              background: #fff;
              border-color: #00d1b6;
              color: #00d1b6;
            }
            &.unfinished {
              background: #fff;
              border-color: #cfcfcf;
              color: #666;
            }
            &.noStart {
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
  .nodate {
    text-align: center;
    .img {
      display: inline-block;
      width: 320rpx;
      height: 240rpx;
      margin-top: 0rpx;
    }
    .nodate_text {
      .name {
        display: block;
        font-size: 28rpx;
        color: #666;
        text-align: center;
        margin-top: 10rpx;
      }
    }
  }
  .smart-set {
    position: fixed;
    right: 24rpx;
    bottom: 120rpx;
    z-index: 98;

    .ai-bg {
      width: 104rpx;
      height: 104rpx;
      display: block;
    }

    .ai-name {
      display: inline-block;
      width: 108rpx;
      height: 40rpx;
      font-size: 24rpx;
      font-weight: 600;
      line-height: 40rpx;
      color: #fff;
      text-align: center;
      background: linear-gradient(316deg, #00cfb4 0%, #0fe3c8 100%);
      border-radius: 24rpx;
    }
  }
}
</style>
